<template>
  <div id="noteTemplate">
    <el-card class="box-card" style="margin:15px">
      <div style="margin-bottom:10px">
        <el-button size="small" type="primary" icon="el-icon-document-add" @click="clickAdd">增加</el-button>
        <el-button size="small" @click="getList">刷新</el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%;padding:5px;"
        :header-cell-style="{
          background: '#333333',
          color: '#ffffff',
          textAlign: 'center'
        }"
      >
        <el-table-column align="center" type="index" width="55" />
        <el-table-column align="center" prop="msgType.data" label="消息类型" width="110" />
        <el-table-column align="center" prop="experimentCode.data" label="实验项目" width="110" />
        <el-table-column align="center" prop="experimentResult.data" label="实验结论" width="110" />
        <el-table-column align="center" prop="content" label="模板内容" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              style="background:#2669F3"
              @click="clickEdit(scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="primary"
              style="background:#2669F3"
              @click="clickDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="basicData.current"
        :page-size="basicData.size"
        :total="total"
        layout="slot,total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <span
          v-if="tableData.length > 0"
          style="font-weight: 400;color:#606266"
        >已选中{{ tableData.length }}条，</span>
      </el-pagination>
    </el-card>

    <el-dialog :visible.sync="AddOrEditLoading" width="60%" center custom-class="print-dialog">
      <span
        slot="title"
        class="dialog-title"
        style="font-size: 18px;font-weight: 400;color: #FFFFFF;"
      >{{ title }}</span>
      <div class="add-edit-dialog">
        <el-form
          ref="basicForm"
          :rules="basicDataRules"
          :inline="true"
          :model="basicData.model"
          class="demo-form-inline"
          size="small"
          label-width="120px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="消息类型:" prop="msgType.key" width="300px">
                <el-select size="mini" v-model="basicData.model.msgType.key" placeholder="消息类型">
                  <el-option
                    v-for="(item, key, index) in dicts.MSG_TYPE"
                    :key="index"
                    :label="item"
                    :value="key"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实验结论:" prop="experimentResult.key">
                <el-select
                  size="mini"
                  v-model="basicData.model.experimentResult.key"
                  placeholder="实验结论"
                >
                  <el-option
                    v-for="(item, key, index) in dicts.EXPERIMENT_RESULT"
                    :key="index"
                    :label="item"
                    :value="key"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实验项目:" prop="experimentCode.key">
                <el-select
                  size="mini"
                  v-model="basicData.model.experimentCode.key"
                  placeholder="实验项目"
                >
                  <el-option
                    v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                    :key="index"
                    :label="item"
                    :value="key"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="margin-top:20px">
              <el-form-item label="模板内容:" prop="content" label-width="100px">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  placeholder="请输入内容"
                  v-model="basicData.model.content"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          style="padding: 6px 19px;"
          @click="onSubmit('add')"
          type="primary"
        >保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import InformManageApi from "@/api/InformManage.js";
import { initDicts } from "@/utils/commons";
import Project from "@/api/Project.js";

export default {
  data() {
    return {
      // 是否展示更多信息
      morderShow: true,
      // 新增修改
      AddOrEditLoading: false,
      // 表格数据
      tableData: [],
      total: 0,
      title: "新增",
      // 基本数据
      basicData: {
        current: 1,
        map: {},
        model: {
          content: "",
          experimentCode: {
            data: "",
            key: ""
          },
          experimentResult: {
            data: "",
            key: ""
          },
          msgType: {
            data: "",
            key: ""
          }
        },
        order: "descending",
        size: 10,
        sort: "id"
      },
      // 校验
      basicDataRules: {
        "msgType.key": [
          { required: true, message: "请选择消息类型", trigger: "change" }
        ],
        "experimentCode.key": [
          { required: true, message: "请选择实验项目", trigger: "change" }
        ],
        "experimentResult.key": [
          { required: true, message: "请选择实验结论", trigger: "change" }
        ],
        content: [
          { required: true, message: "请输入模板内容", trigger: "change" }
        ]
      },
      // 字典
      dicts: {
        MSG_TYPE: {}, //消息类型
        EXPERIMENT_RESULT: {} //实验结论
      },
      ids: []
    };
  },
  mounted() {
    this.getList();
    initDicts(["MSG_TYPE", "EXPERIMENT_CODE", "EXPERIMENT_RESULT"], this.dicts);
  },
  methods: {
    getList() {
      InformManageApi.noteTemplate.page(this.basicData).then(res => {
        if (res.status == 200) {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        }
      });
    },
    // 点击展示与收起
    onMoreStatus() {
      this.morderShow = !this.morderShow;
    },
    //点击全选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 重置数据
    resData() {
      this.basicData = {
        current: 1,
        map: {},
        model: {
          content: "",
          experimentCode: {
            data: "",
            key: ""
          },
          experimentResult: {
            data: "",
            key: ""
          },
          msgType: {
            data: "",
            key: ""
          }
        },
        order: "descending",
        size: 10,
        sort: "id"
      };
      if (this.$refs["basicForm"] !== undefined) {
        this.$refs["basicForm"].resetFields();
      }
    },
    // 点击新增
    clickAdd() {
      this.resData();
      this.title = "新增";
      this.AddOrEditLoading = true;
    },
    // 点击修改
    clickEdit(v) {
      this.basicData.model = v;
      this.title = "修改";
      this.AddOrEditLoading = true;
    },
    // 点击删除
    clickDelete(v) {
      this.$confirm(`谨慎操作`, `是否删除？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        InformManageApi.noteTemplate.delete({ "ids[]": v.id }).then(res => {
          if (res.status == 200) {
            this.resData();
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          } else {
            this.$message.error("删除失败!");
          }
        });
      });
    },
    // 基础信息按钮点击事件
    onSubmit(type) {
      if (this.title == "新增") {
        type = "add";
      } else if (this.title == "修改") {
        type = "edit";
      }
      if (type == "add") {
        this.$refs.basicForm.validate(valid => {
          if (valid) {
            InformManageApi.noteTemplate.add(this.basicData.model).then(res => {
              if (res.status == 200) {
                this.$message({
                  type: "success",
                  message: "新增成功!"
                });
                this.AddOrEditLoading = false;
                this.resData();
                this.getList();
              } else {
                this.$message.error("新增失败!");
              }
            });
          } else {
            return false;
          }
        });
      } else if (type == "edit") {
        this.$refs.basicForm.validate(valid => {
          if (valid) {
            InformManageApi.noteTemplate
              .edit(this.basicData.model)
              .then(res => {
                if (res.status == 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功!"
                  });
                  this.AddOrEditLoading = false;
                  this.resData();
                  this.getList();
                } else {
                  this.$message.error("修改失败!");
                }
              });
          } else {
            return false;
          }
        });
      }
    },
    // 点击分页
    handleSizeChange: function(val) {
      this.basicData.size = val;
      this.getList(this.basicData);
    },
    // 选择页码
    handleCurrentChange: function(currentPage) {
      this.basicData.current = currentPage;
      this.getList(this.basicData);
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#noteTemplate {
  .el-form-item__content,
  .el-date-editor,
  .el-select,
  .el-textarea {
    width: 100% !important;
  }
  .experimentList {
    width: 40%;

    .el-form-item__content {
      width: 80%;
    }
  }
  .mores {
    .flex;
    justify-content: flex-start;
    width: 100%;
    background: #188ff233;
    height: 30px;
    padding: 5px 8px;
    .more-title {
      font-family: SourceHanSansSC;
      font-style: normal;
      letter-spacing: 0px;
      line-height: 20px;
      text-decoration: none;
      margin-right: 1rem;
      font-size: 14px;
      font-weight: 500;
      color: #000;
    }
  }

  #more-row {
    #shiyan {
      .projectIdList {
        width: 100%;
        .el-form-item__content {
          width: 80%;
        }
      }
    }
    .more-col {
      .remark {
        width: 100%;
        .el-form-item__content {
          width: 90%;
        }
      }
    }
    .el-form-item {
      .el-form-item__content {
        width: 400px;
      }
    }
  }
  .buttom {
    width: 100%;
    .flex;
  }
  .el-dialog__header {
    border-bottom: 1px solid #e0e0e0;
  }
  .print-form {
    max-height: 500px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex-flow: wrap;
    .print-item {
      width: 50%;
      .flex;
      justify-content: flex-start;
      color: #222222;
      font-size: 15px;
      margin-top: 10px;
      .title {
        font-weight: bold;
        flex: 0.4;
      }
      .value {
        flex: 0.6;
        font-weight: bold;
        overflow-wrap: anywhere;
      }
    }
  }
  .el-dialog__footer {
    .flex;
  }
  .select-input {
    .el-form-item {
      margin: 0;
      .el-select .el-input {
        width: 100%;
      }
    }
    .flex;
    justify-content: flex-start;
    margin-bottom: 18px;
    .el-select .el-input {
      width: 110px;
    }
    .input-with-select .el-input-group__prepend {
      background-color: #fff;
    }
  }
  .add-edit-dialog {
    .el-form-item__content {
      width: 80%;
    }
  }
}
</style>
